<template>
    <div class="container">
        <el-form ref="form" :model="form" :rules="rules" hide-required-asterisk label-width="40px">
            <h2>胖虎到家 - 后台登陆</h2>
            <el-form-item label="账号" prop="username">
                <el-input prefix-icon="el-icon-user" v-model="form.username" placeholder="请输入账号"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input prefix-icon="el-icon-lock" type="password" v-model="form.password"
                    placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item label-width="0px">
                <el-button type="primary" @click="onSubmit">登录</el-button>
                <el-button @click="reset">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    data() {
        return {
            form: {
                username: '',
                password: '',

            },
            // rules验证数据
            rules: {
                username: [
                    { required: true, message: '请输入账号', trigger: 'blur' },
                    { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 2, max: 16, message: '长度为 2 到 16 个字符', trigger: 'blur' }
                ],
            }
        }
    },
    methods: {
        // 登录事件
        onSubmit() {
            //验证数据是否合法
            this.$refs['form'].validate((valid) => {    // valid:boolean类型结果数据
                if (valid) {
                    // 调用后端接口
                    // 协议://IP地址:端口号/请求名
                    this.$http.post('http://43.143.190.87:8182/login?username=' + this.form.username + '&pwd=' + this.form.password)
                        .then(res => {
                            console.log(res.data)
                            // 验证是否登录成功
                            if (res.data.code == 1) {
                                this.$message.success('登陆成功')
                                // 通过路由跳转页面
                                this.$router.push('/main')
                            } else {
                                this.$message.error('账号或密码错误')
                            }
                        })
                        .catch(error => {
                            this.$message.error('服务器异常')
                        });
                } else {
                    this.$message.error('账号或密码格式有误');
                    return false;
                }
            });
        },
        // 重置事件
        reset() {
            this.$refs['form'].resetFields();
        },

        handleKeyDown(e) {
            if (e.keyCode === 13) { // 检测回车键
                this.onSubmit(); // 调用登录方法
            }
        }
    },
    mounted() {
        // 在Vue实例挂载完成后监听按键事件
        window.addEventListener('keydown', this.handleKeyDown);
    }
}
</script>

<style scoped>
/* 设置登陆界面背景 */
.container {
    height: 100vh;
    background-color: pink;
    background-image: url(../assets/login_bg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    overflow: hidden;
}

/* 设置登录表单样式 */
.el-form {
    width: 380px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    background-color: rgba(255, 255, 255, 0.7);
    margin: 15% auto;
    padding: 30px 50px;
    border-radius: 10px;
}

/* 登录按钮居中 */
.el-form-item {
    text-align: center;
}

/* 标题居中 */
h2 {
    text-align: center;
}
</style>